import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [
  {   //   /是默认第一个页面
    path: '/',  //首页页面
    component: () => import('../page/Home.vue'),
    children: [
      {
        path: '/login', //登录页面
        component: () => import('../page/Login.vue')
      },
      {
        path: '/my',  //我的页面
        component: () => import('../page/My.vue')
      },
      {
        path: "/gouwche",
        component: () => import('../page/Gouwche.vue')
      },
      {
        path: "/fenl",
        component: () => import('../page/Fenl.vue')
      }
    ]

  },
  { //   /detail/:id 就是一个动态路由  :id表示 这个位置可以是任意字符
    path: '/detail/:id',
    name: 'Detail',
    component: () => import('../page/Detail')
  }

  // {
  //   path: '/',
  //   name: 'home',
  //   component: HomeView
  // },
  // {
  //   path: '/about',
  //   name: 'about',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  // }
]

//router 路由实例对象，保存这所有的路由信息(有很多路由对象)
// route 当前路由对象 只是一个对象
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

//监听 导航守卫
//beforeEach 全局前置导航守卫
//全局: 在跳转任何路由前 都会执行beforeEach方法
//前置: 跳转路由前
router.beforeEach((to, from, next) => {
  //to,from 就是一个route 就是一个路由对象,里面保存这个路由相关信息
  // to: 去哪里 
  // from: 从哪里来
  // next(): next是一个方法 表示继续向下去 （必须调用next这个方法 代码才会执行 ❗❗❗）

  //如果去的是购物车 一定要判断是否登录过  怎么判断有没有登录呢？
  // 答: 可以通过本地存储 存储一个字段 表示登录过 
  // setItem 是存
  // getItem 是储


})



export default router
